<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
		





		<script>
			/*
			思路分析：
			过滤掉 html和css
			1.购物车 使用数组 保存的是一个一个的订单项 
			2.订单项 使用对象 价格 名称 数量
			3.遍历显示 通过for 
			（1）div 加上订单项的样式 通过内容 innerHTML append

			4.更新总数和总价格
			5.点击购物车 考虑购物车中是否存在
 			6.更新数量  找到对应你点击那个商品 如果是+ 在原有基础之上+1  如果是- 在原有基础之上-1
			7.删除商品 找点点击的商品 直接移除 在数组中删除 
			8.不管你哪个操作，最终都要重新渲染 显示的操作是要封装成函数
			9.函数的调用 尽量只做一件事 添加 删除 修改数量 三个事 可以分别对应三个函数 在父级的事件委托（在总流程中）中 进行函数调用 
			注意：
				显示（将数据拼接 通过DOM编程的方式）和逻辑（添加 移除 修改商品数量 【操作的都是底层的那个数组】）混乱


			10.先写逻辑
				逻辑中的数据哪里来？其实都是自己定义的 DOM中的数据全是显示
				
				存在一个购物车 数组
				先写购物车的添加，删除，商品修改，总价的计算 总数量的计算

			11.显示
			*/

			let cart = [
				{
					id: 1,
					name: "华为手机",
					quantity: 1,
					price: 100
				},
				{
					id: 2,
					name: "苹果手机",
					quantity: 2,
					price: 200
				}
				
			];


			// 商品添加
			let cartItem = {
					id: 2,
					name: "苹果手机",
					quantity: 1,
					price: 200
				}
			/*
			如果购物车中存在商品？需要在原有的基础上进行数量的添加
			判断
			if cartItem.id === 

			循环
			*/

			let addCartItem = (cartItem) => {
				
			}
			// for (let item of cart) {
			// 	console.log(item);
			// 	if (cartItem.id === item.id) {
			// 		item.quantity++;
			// 	}else {
			// 		// 添加到购物车
			// 		cart.push(cartItem);
			// 	}
			// }

				// 使用find函数
				// let findCartItem = cart.find((item) => {
				// 	return item.id === cartItem.id;
				// })
				// // console.log(findCartItem);
				// // console.log(findCartItem == false);
				// if (findCartItem) {
				// 	findCartItem.quantity++;
				// }else {
				// 	cart.push(cartItem);
				// }

			// for (let index in cart) {
			// 	console.log(index);
			// 	if (cartItem.id === cart[index].id) {
			// 		cart[index].quantity++;
			// 	}else {
			// 		// 添加到购物车
			// 		cart.push(cartItem);
			// 	}
			// }

			// cart.forEach((item, index) => {
			// 	console.log(item);
			// 	console.log(index);
			// });

			// console.log(cart);


			// 在购物车中删除商品
			/*
			思路分析：
			1.先找到该商品 通过判断 if
			2.用循环 
			
			*/
			// cart = cart.filter((item) => {
			// 	// 过滤条件
			// 	// 要保留商品项id 和当前不想等的 
			// 	return item.id !== cartItem.id;
			// })
			// console.log(cart);


			// 改变数量

			let count = -1;

			// 找到了改变数量
			let findCartItem1 = cart.find((item) => {
					return item.id === cartItem.id;
				})
			// 没找到的情况
			if (!findCartItem1) {
				
			}else {
					// 找到了
				findCartItem1.quantity += count;

				// 判断是否到0
				if (findCartItem1.quantity < 1) {
					cart = cart.filter((item) => {
						// 过滤条件
						// 要保留商品项id 和当前不想等的 
						return item.id !== cartItem.id;
					})
				}
			}
			

			// 做统计
			let totalCount = 0;
			let totalPrice = 0;
			cart.forEach((item, index) => {
				totalCount += item.quantity;
				totalPrice += item.price * item.quantity;
			});





			console.log(cart);
			console.log(totalCount);
			console.log(totalPrice);



		</script>
	</body>
</html>